<template>
    <div id="main_login_box">
        <div id="login_box">
            <el-input class="login_input" v-model="email" placeholder="请输入邮箱" clearable />
            <el-input class="login_input" v-model="password" placeholder="请输入密码" show-password />

            <el-button @click="user_login" class="login_button" type="primary">登录</el-button>

            <el-button @click="user_registry" class="login_button" type="success">注册</el-button>
            <div style="text-align: center;margin-top: 16px;">
                <span @click="forgot_password" id="forgot_span">忘记密码 ?</span>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import Qs from 'qs'
    import {ElLoading, ElMessage} from "element-plus";

    export default {
        name: "Login",
        data() {
            return {
                email: void 0,
                password: void 0,
            }
        },
        methods: {
            user_login(){

                if (!(this.email || this.password)){
                    ElMessage({
                        message: "uid和密码不可为空！", type: 'error'})
                    return
                }

                // 初始化加载动画
                const loading = ElLoading.service({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                })
                // 5秒后终止加载动画
                setTimeout(() => {
                    loading.close()
                }, 5000)

                let this_ = this;
                axios.post('/user/api/login', Qs.stringify({
                    "email": this_.email,
                    "password": this_.password
                }))
                    .then(function (response) {

                        // 获取response时，5秒后终止加载动画
                        setTimeout(() => {
                            loading.close()
                        }, 500)

                        if (response.data === ''){
                            ElMessage({message: "登录成功", type: 'success'})
                            window.location.href = '/user/home'
                        }
                        else if (response.data === '1') {
                            ElMessage({message: "密码错误", type: 'warning'})
                        }
                        else if (response.data === '2') {
                            ElMessage({message: "邮箱未注册", type: 'error'})
                        }
                        else if (response.data === '3') {
                            ElMessage({message: "非法请求", type: 'error'})
                        }
                        else {
                            ElMessage({message: "服务器异常", type: 'error'})
                        }
                    })
                    .catch(function (error) {

                        // 出现异常时，0.5秒后终止加载动画
                        setTimeout(() => {
                            loading.close()
                        }, 500)

                        console.log(error);
                        ElMessage({message: "服务器异常", type: 'error'})
                    });
            },
            user_registry(){
                this.$router.replace('/user/registry')
            },
            forgot_password(){
                window.location.href = '/user/forgot'
            }
        },
        watch: {
            $route(to, from) {
                if (to.path === '/user/home') {
                    //调用inject返回的reload
                    this.reload()
                }
            }
        }
    }
</script>

<style scoped>
    @import "../assets/css/login.css";

</style>

<style>
    .el-input__inner{
        height: 36px;
    }
</style>